<template>
    <div>
      <router-view></router-view>
      <!--底部-->
      <div class="footer">
        <router-link :to="val.slide" tag="div" @click="switchTo(val.slide)" class="foot" v-for="(val, key) in foot" :key="key">
          <img :src="val.img" alt="">
          <p>{{val.title}}</p>
        </router-link>
      </div>
    </div>
</template>

<script>
export default {
  name: 'auth',
  data () {
    return {
      foot: [
        {title: '首页', img: require('../../components/pages/image/icons/155352235108424095.png'), slide: './home'},
        {title: '找货', img: require('../../components/pages/image/icons/155352235108424095.png'), slide: './goods'},
        {title: '拼购推荐', img: require('../../components/pages/image/icons/155352235108424095.png'), slide: './nominate'},
        {title: '玩法介绍', img: require('../../components/pages/image/icons/155352220182354151.png'), slide: './uno'},
        {title: '我的拼购', img: require('../../components/pages/image/icons/155352224914259456.png'), slide: './person'}
      ]
    }
  },
  methods: {
    switchTo (path) {
      // console.log(this.$router)
      this.$router.replace(path)
    }
  }
}
</script>

<style scoped lang="scss">
  div{
    width: 100vw;
    overflow: hidden;
    .footer{
      width: 100vw;
      height: 165px;
      display: inline-block;
      position: fixed;
      bottom: 0;
      background: #ffffff;
      z-index: 999999;
      .foot{
        width: 20vw;
        display: inline-block;
        img{
          width: 80px;
          height: 80px;
          margin-left: 85px;
          margin-top: 15px;
        }
        p{
          font-size: 32px;
          text-align: center;
        }
      }
    }
  }
</style>
